import React from 'react';

import { Icon, Row, Card, Form, Col, Input, Button } from 'antd';

import { FormComponentProps } from 'antd/lib/form';

import { connect } from 'dva';
import { threeColumnsLayout, formItemLayout } from '@/common/layout/form';

import { Brand } from '@/models/brand';

interface ExtraButtonsProps {
  onSearch: () => void;
}

// 右上角按钮组
const ExtraButtons: React.FC<ExtraButtonsProps> = props => (
  <div className="horizon-button-group-reverse">
    <Button type="primary" onClick={props.onSearch}>
      查询结果
    </Button>
  </div>
);

// 搜索表单Title
const FormTitle: React.FC = () => (
  <div>
    <Icon type="search" />
    <span style={{ marginLeft: '5px' }}>筛选搜索</span>
  </div>
);

interface SearchFormProps extends FormComponentProps {
  onSearch: () => void;
}

// 搜索表单
// eslint-disable-next-line react/prefer-stateless-function
class SearchForm extends React.Component<SearchFormProps> {
  render() {
    const { form, onSearch } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Row>
        <Card title={<FormTitle />} extra={<ExtraButtons onSearch={onSearch} />}>
          <Form layout="horizontal" hideRequiredMark>
            <Row gutter={16}>
              <Col {...threeColumnsLayout}>
                <Form.Item {...formItemLayout} label="输入搜索">
                  {getFieldDecorator<Brand>('name')(<Input placeholder="品牌名称/关键字" />)}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
      </Row>
    );
  }
}

export default connect()(Form.create<SearchFormProps>()(SearchForm));
